jquery mobile 如何在移动网络浏览器中停止自动滚动到焦点输入

Question

在移动设备中，当我打开我的页面和 select 输入框时，虚拟键盘打开，页面自动滚动以将输入框置于中心。

我不想要这个动作。我用谷歌搜索了很多答案，其中大多数建议在调整大小事件中手动调用以下 javascript 代码。

window.scrollTo(0,0)

但是当我尝试时，它使页面抖动，就像页面向下滚动一样，然后很快又回来了。

有什么好的解决办法吗？谢谢

Answer 1

好的。

所以现在你知道如何通过以下答案检测虚拟键盘打开事件： jquery mobile如何检测手机虚拟键盘是否打开

对于粗略的方法，您可以在处理程序中添加以下代码：

setTimeout(function(){
    window.scrollTo(0,0);
}, 100);

但这确实使页面闪烁，不是一个顺利的解决方案。

您需要知道的是，移动设备会尝试检测活动输入元素的位置，如果它即将被键盘隐藏，则只需向下滚动整个页面，使其完全显示。

所以这是一个棘手的方法：你只是欺骗移动设备认为元素现在是非常靠前的位置，这个技巧将以不同的方式完成 iOS 和 Android.

iOS

以下代码非常适合 iOS:

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){

            var intv = 100;
            var $obj = $(this);

            if (getMobileOperatingSystem() == 'ios') {

                e.preventDefault();
                e.stopPropagation();

                $obj.css({'transform': 'TranslateY(-10000px)'}).focus();
                setTimeout(function(){$obj.css({'transform': 'none'});}, intv);
            }
            return true;
        });

Android

在虚拟键盘打开事件处理程序中，将一些元素隐藏在活动输入元素上方，让移动设备认为活动输入元素在最上面，然后在几秒钟后，再次显示隐藏的东西。

所以在下面的示例代码中，$wrap 是页面的全部内容，$wrap.find('.content') 是活动输入框上方的元素，所以只需将其隐藏即可欺骗手机设备，然后稍后再次显示。

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
        $wrap.css({opacity: 0})
           .find('.content').hide(); // trick the browser thinks the element is relatively top position... 
        setTimeout(function(){
            $wrap.css({opacity: 1})
                 .find('.content').show();
        }, 10);
    }
}

好吧，到目前为止这些都是工作代码，但不能保证新版本的移动设备 OS。 :-)

老实说，我真的希望移动网络浏览器支持一些钩子和函数来处理这种令人头疼的问题。

jquery mobile 如何在移动网络浏览器中停止自动滚动到焦点输入

jquery mobile How to stop auto scroll to focused input in Mobile web browser

mobile-website